<template>
    <div  >
        <!-- 填写的表单 -->
        <el-form ref='myForm' :rules='formRules' :model="formData" label-width="100px" >
          <el-form-item label="姓名" prop="username">
              <el-input v-model="formData.username"></el-input>
          </el-form-item>
          <el-form-item label="性别" prop="sex">
              <el-input v-model="formData.sex"></el-input>
          </el-form-item>
          <el-form-item label="年龄" prop="age">
              <el-input v-model="formData.age"></el-input>
          </el-form-item>
          <el-form-item label="学号" prop="code">
              <el-input v-model="formData.code"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="submit('myForm')" type="primary" >提交</el-button>
          </el-form-item>
        </el-form>
        <!-- 展示的表格 -->
        <el-table :data="tableData">
          <el-table-column label="姓名" prop="username"></el-table-column>
          <el-table-column label="性别" prop="sex"></el-table-column>
          <el-table-column label="年龄" prop="age"></el-table-column>
          <el-table-column label="学号" prop="code"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="{ row }">
                <el-button type="primary" @click="change({type:'reset',row})">修改</el-button>
                <el-button type="danger" @click="change({type:'delet',row})">删除</el-button>
            </template>
        </el-table-column>
        </el-table>
        
    </div>
</template>
<script>
export default {
    methods:{
        change({type,row}){
            console.log(type,row)
            const index = this.tableData.findIndex((item)=>item.code === row.code);
            if(type === 'reset'){
                //修改，把row数据传给formData
                // 暴力克隆，弊端：如果值是函数类型或正则会被忽略
                this.formData = JSON.parse(JSON.stringify(row));
            }else{
                //删除，用row去找tableData，找到后就删掉

                this.tableData.splice(index,1);
            }
        },
        submit(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
              const data = JSON.parse(JSON.stringify(this.formData));
              //先查后插
              const index = this.tableData.findIndex((item)=>item.code === data.code);
              if(index !== -1){//$set
                  //找到了就修改，vue里的数组修改不可以使用下标直接赋值，无效果
                //   this.tableData[index] = this.formData;
                  this.tableData.splice(index,1,data);//索引，删几个，添加的值
              }else{
                  //找不到就是插入
                    this.tableData.push(data)
              }
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
    },
    data(){
        return {
            //表格数据
            tableData:[{username:'晓燕',age:21,sex:'女',code:5211314}],
            //表单校验
            formRules:{
                username:[
                    { required: true, message: '姓名不许为空', trigger: 'blur' },
                    { min: 2, max: 16, message: '长度在 2 到 16 个字符', trigger: 'blur' }
                ],
                sex:[
                    {required:true,message:'性别不许为空',trigger:'blur'}
                ],
                age:[
                    {required:true,message:'年龄不许为空',trigger:'blur'}
                ],
                code:[
                    {required:true,message:'学号不许为空',trigger:'blur'}
                ],
            },
            //表单的数据
            formData:{
                username:'',
                age:'',
                sex:'',
                code:''
            },
        }
    }
}
</script>